<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://cdn.bootcdn.net/ajax/libs/minireset.css/0.0.2/minireset.min.css" rel="stylesheet" />
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
    <link rel="stylesheet" href="scss/dist/app.css" />
    <title>小米移动端官网Flex</title>
  </head>
  <body>
    <header>
      <div class="search">
        <div class="logo">
          <a href=""><img src="images/milogo.png" width="24px" alt="" srcset="" /></a>
        </div>
        <div class="search-box">
          <i class="fa fa-search" aria-hidden="true"></i>
          <span>搜索商品名称</span>
        </div>
        <div class="user"><i class="fa fa-user-o" aria-hidden="true"></i></div>
      </div>
      <!-- 导航开始 -->
      <nav>
        <div class="links">
          <a href="" class="active">推荐</a>
          <a href="">手机</a>
          <a href="">智能</a>
          <a href="">电视</a>
          <a href="">家电</a>
          <a href="">笔记本</a>
        </div>
        <div class="icon">
          <i class="fa fa-angle-down" aria-hidden="true"></i>
        </div>
      </nav>
      <!-- 导航结束 -->
    </header>
    <main>
      <div class="slide">
        <a href=""><img src="images/s1.jpg" alt="" /></a>
      </div>
      <div class="category">
        <a href=""><img src="images/1.png" alt="" /></a>
        <a href=""><img src="images/2.webp" alt="" /></a>
        <a href=""><img src="images/3.webp" alt="" /></a>
        <a href=""><img src="images/4.webp" alt="" /></a>
        <a href=""><img src="images/5.webp" alt="" /></a>
        <a href=""><img src="images/6.webp" alt="" /></a>
        <a href=""><img src="images/7.png" alt="" /></a>
        <a href=""><img src="images/8.png" alt="" /></a>
        <a href=""><img src="images/9.webp" alt="" /></a>
        <a href=""><img src="images/10.png" alt="" /></a>
      </div>
      <div class="hot">
        <div>
          <a href=""><img src="images/z1.webp" alt="" /></a>
        </div>
        <div>
          <a href=""><img src="images/y1.webp" alt="" /></a>
          <a href=""><img src="images/y2.webp" alt="" /></a>
        </div>
      </div>
      <div class="ads">
        <a href=""><img src="images/ad1.webp" alt="" srcset="" /></a>
      </div>
      <!-- 商品开始 -->
      <div class="goods">
        <a href="">
          <div class="preview">
            <img src="images/g1.jpg" alt="" />
          </div>
          <h3>小米11 Pro</h3>
          <div class="info">1/1/12"GN2 | 骁龙888</div>
          <div class="price">
            ￥4499
            <span>起</span>
            <del>￥4499</del>
          </div>
          <div class="btn">
            <span>立即购买</span>
          </div>
        </a>
        <a href="">
          <div class="preview">
            <img src="images/g1.jpg" alt="" />
          </div>
          <h3>小米11 Pro</h3>
          <div class="info">1/1/12"GN2 | 骁龙888</div>
          <div class="price">
            ￥4499
            <span>起</span>
            <del>￥4499</del>
          </div>
          <div class="btn">
            <span>立即购买</span>
          </div>
        </a>
        <a href="">
          <div class="preview">
            <img src="images/g1.jpg" alt="" />
          </div>
          <h3>小米11 Pro</h3>
          <div class="info">1/1/12"GN2 | 骁龙888</div>
          <div class="price">
            ￥4499
            <span>起</span>
            <del>￥4499</del>
          </div>
          <div class="btn">
            <span>立即购买</span>
          </div>
        </a>
        <a href="">
          <div class="preview">
            <img src="images/g1.jpg" alt="" />
          </div>
          <h3>小米11 Pro</h3>
          <div class="info">1/1/12"GN2 | 骁龙888</div>
          <div class="price">
            ￥4499
            <span>起</span>
            <del>￥4499</del>
          </div>
          <div class="btn">
            <span>立即购买</span>
          </div>
        </a>
        <a href="">
          <div class="preview">
            <img src="images/g1.jpg" alt="" />
          </div>
          <h3>小米11 Pro</h3>
          <div class="info">1/1/12"GN2 | 骁龙888</div>
          <div class="price">
            ￥4499
            <span>起</span>
            <del>￥4499</del>
          </div>
          <div class="btn">
            <span>立即购买</span>
          </div>
        </a>
        <a href="">
          <div class="preview">
            <img src="images/g1.jpg" alt="" />
          </div>
          <h3>小米11 Pro</h3>
          <div class="info">1/1/12"GN2 | 骁龙888</div>
          <div class="price">
            ￥4499
            <span>起</span>
            <del>￥4499</del>
          </div>
          <div class="btn">
            <span>立即购买</span>
          </div>
        </a>
      </div>
      <!-- 商品结束 -->
    </main>
    <footer>
      <a class="active" href=""><i class="fa fa-home" aria-hidden="true"></i>首页</a>
      <a href=""><i class="fa fa-bars" aria-hidden="true"></i>分类</a>
      <a href=""><i class="fa fa-globe" aria-hidden="true"></i>米圈</a>
      <a href=""><i class="fa fa-shopping-basket" aria-hidden="true"></i>购物车</a>
      <a href=""><i class="fa fa-user-o" aria-hidden="true"></i>我的</a>
    </footer>
  </body>
</html>
